"use client";

/**
 * /w/:workspace/trash — trashed pages (delete sets `trashedAt`; FR-PR-028).
 *
 * List     → GET  /workspaces/:wid/pages?trashed=true   ({ data: Page[] } of the
 *             trashed ROOTS — a trashed subtree appears once, at its root;
 *             server-gated to Admin/Owner per docs/api/pages.md §3)
 * Restore  → POST /pages/:id/restore                    (recursive, EDIT)
 * Purge    → DELETE /pages/:id/permanent                (hard delete — owner/admin
 *             or the owner of their own page)
 *
 * The list is ordered by `trashedAt` (newest first, client-side — the API
 * orders by position so its cursor stays consistent). A trashed DATABASE page
 * shows the database icon (its `databaseId` is non-null — the Page model has
 * no `type` field; the Database row is the marker).
 */
import { useMemo } from "react";
import { useParams } from "next/navigation";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Database as DatabaseIcon, FileText, Loader2, RotateCcw, Trash2 } from "lucide-react";
import { formatRelativeTime } from "@/lib/utils";
import { apiFetch, pageApi } from "@/lib/api";
import { useWorkspace } from "@/hooks/use-workspace";
import { Page } from "@/lib/types";

export default function TrashPage() {
  const params = useParams<{ workspace: string }>();
  const slugOrId = params?.workspace ?? "";
  const { data: workspace } = useWorkspace(slugOrId);
  const qc = useQueryClient();

  const trashed = useQuery({
    queryKey: ["workspaces", workspace?.id ?? slugOrId, "trash"],
    queryFn: () => pageApi.list(workspace?.id ?? slugOrId, { trashed: true, limit: 200 }),
    enabled: !!workspace?.id,
    retry: false
  });

  // Both restore and purge must also refresh the page tree: a restored page
  // re-appears under its parent, and a purged page must be gone.
  const refresh = () => {
    qc.invalidateQueries({ queryKey: ["workspaces", workspace?.id, "trash"] });
    qc.invalidateQueries({ queryKey: ["workspaces", workspace?.id, "page-tree"] });
  };

  const restore = useMutation({
    mutationFn: (pageId: string) => pageApi.restore(pageId),
    onSuccess: refresh
  });

  const purge = useMutation({
    mutationFn: async (pageId: string): Promise<void> => {
      await apiFetch(`/pages/${pageId}/permanent`, { method: "DELETE" });
    },
    onSuccess: refresh
  });

  // Purge is owner/admin-only server-side. Compared case-insensitively because
  // the API returns the raw UPPERCASE role enum while core types are lowercase
  // (flagged to the core agent).
  const role = (workspace?.role ?? "").toLowerCase();
  const canPurge = role === "owner" || role === "admin";
  // The API orders the trash by position (cursor consistency); show newest
  // first (the `trashedAt` recency the page's copy promises).
  const items = useMemo(
    () =>
      [...(trashed.data ?? [])].sort(
        (a, b) => new Date(b.trashedAt ?? 0).getTime() - new Date(a.trashedAt ?? 0).getTime()
      ),
    [trashed.data]
  );

  return (
    <div className="mx-auto max-w-2xl px-6 py-8">
      <h1 className="mb-1 text-xl font-semibold">Trash</h1>
      <p className="mb-4 text-sm text-muted-foreground">
        Deleted pages are kept here. Restore to bring them back, or purge to delete permanently.
      </p>

      {trashed.isLoading && (
        <p className="inline-flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="size-4 animate-spin" /> Loading trash…
        </p>
      )}

      {trashed.isError && (
        <p className="rounded-md border border-dashed border-border p-4 text-sm text-muted-foreground">
          Couldn't load the trash. Viewing the trash requires the Admin or Owner role.
        </p>
      )}

      {!trashed.isLoading && !trashed.isError && items.length === 0 && (
        <p className="rounded-md border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
          The trash is empty.
        </p>
      )}

      {/* `trash-section` (tests/README.md) is the SIDEBAR Trash node (the
          navigation target) — it lives on the sidebar, not this list, so a
          single element owns it (strict-mode safe). */}
      <ul data-testid="trash-list" className="space-y-1.5">
        {items.map((p) => (
          <li key={p.id} data-testid={`trash-item-${p.id}`} className="flex items-center gap-2.5 rounded-md border border-border px-3 py-2">
            <span className="shrink-0 text-sm" aria-hidden>
              {p.icon || (p.databaseId ? <DatabaseIcon className="size-4 text-blue-600" /> : <FileText className="size-4 text-muted-foreground" />)}
            </span>
            <div className="min-w-0 flex-1">
              <p className="truncate text-sm">{p.title || "Untitled"}</p>
              <p className="text-[11px] text-muted-foreground">
                Trashed {p.trashedAt ? formatRelativeTime(p.trashedAt) : "recently"}
              </p>
            </div>
            <button
              type="button"
              data-testid={`trash-restore-${p.id}`}
              className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-muted-foreground hover:bg-muted disabled:opacity-50"
              onClick={() => restore.mutate(p.id)}
              disabled={restore.isPending}
            >
              <RotateCcw className="size-3.5" aria-hidden /> Restore
            </button>
            {canPurge && (
              <button
                type="button"
                data-testid={`trash-purge-${p.id}`}
                className="inline-flex items-center gap-1 rounded-md border border-destructive/40 px-2 py-1 text-xs text-destructive hover:bg-destructive/10 disabled:opacity-50"
                // Direct hard-delete (no confirm): the TASK-0046 phase-gate E2E
                // purges with a single click and asserts an immediate 404 — a
                // typed-confirm dialog (TASK-0039 / FR-PR-015) would block the
                // gate (Playwright auto-dismisses dialogs). Conflict recorded
                // in FEATURE_TRACKER (T-192); the typed-confirm is a follow-up
                // that must land WITH an updated E2E that drives the confirm.
                onClick={() => purge.mutate(p.id)}
                disabled={purge.isPending}
              >
                <Trash2 className="size-3.5" aria-hidden /> Purge
              </button>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}